<template>
  <Page :name="name">
    <div class="page-conent">
      <div class="form-item fx fx-center">
        <div class="fx form-label fx-vc fx-around" @click="changeAreaCode">
            <span>+{{form[type_enum.phone].area_code}}</span>
            <i class="arrow"></i>
        </div>
        <img src="~/assets/img/ic_login_clear@2x.png" alt="" class="clear"
          v-if="form[type_enum.phone].value.length!=0" @click="form[type_enum.phone].value=''">
        <input type="text" class="flex" v-model="form[type_enum.phone].value" placeholder="请输入手机号码">
      </div>

      <div class="btn">
        <button :disabled="!valid_form" @click="submit($event)" class="btn btn-block btn-primary">
          下一步
        </button>
      </div>

    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';

const type_enum =  {
  'phone': 1,
}

export default {
  asyncData(context) {
    const { store,route } = context;
    let rs = {}
    if(route.params.country && route.params.data){
      let { form, by } = route.params.data;
      form[by].area_code = route.params.country.code;
      rs = {form,by};
    }
    return rs;
  },
  components: {
    Page,
  },
  data() {
    return {
      form:{
        [type_enum.phone]:{
          area_code:'855',
          value:'',
        },
      },
      by:1,
      type_enum,
      type:'',
      name:''
    }
  },
  mounted(){
    this.type = this.$utils.getUrlKey("type") ? true:false;
    if(this.type){
      this.name="设置手机号";
    }else{
      this.name="修改手机号";
    }
  },
  methods: {
    changeAreaCode(){ // 修改手机区号
      // 缓存表单数据
      let {
          form,
          by
        } = this.$data;


      this.$router.push({name:'area_list',
        query:{
          from:'setting-edit-phone'
        },
        params:{
          from:this.$route.name,
          data:{
            form,
            by
          }
        }
      });
    },
    async submit(){
      try{
        let form = this.form[this.by];
        let { data: rs } = await this.$axios.post('?ct=api&ac=check_account_edit',{
          account:form.area_code + form.value,
        });
        if(rs.code == 0){
          this.$router.push({path:'enter-code?code='+form.area_code+'&phone='+form.value})
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
    }
  },
  computed:{
    valid_form(){
      let flag = true;
      let form = this.form[this.by];
      flag = !!String(form.value).trim() ;
      return flag
    },
  },
}
</script>

<style lang="less" scoped>
  .page-conent {
    position: absolute;
    top:88px;
    left:0;
    width:100%;
    padding:20px 0px;
    .arrow {
      display: block;
      border-bottom:1px solid #999;
      border-left: 1px solid #999;
      width:10px;
      height:10px;
      transform: rotate(-45deg)
    }
    .form-item {
      background: #fff;
      padding:0 30px;
      & + .form-item {
        margin-top:20px;
      }
      input{
        font-size:32px;
      }
      .form-label {
        width:130px;
        margin-right: 40px;
        font-size:30px;
        color:#292929;
      }
      height:110px;
      .clear{
        width:30px;
        height:30px;
        position: absolute;
        right:30px;
      }
    }
    div.btn{
      width:688px;
      margin:40px auto;
      display: block;
      .btn{
        border-radius: 8px;
        border:0;
      }
    }
  }
</style>
